
@font-face{font-family:"electronicFont1";src:url("../font/DS-DIGIT.TTF")}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: "electronicFont";font-weight: 400;src: url("../font/AlimamaDaoLiTi.woff2") format("woff2"),
    url("../font/AlimamaDaoLiTi.woff") format("woff");
    font-display: swap;
  }
.App{
    /* background-image: radial-gradient(ellipse farthest-corner at center center, #1b44e4 10%, #020f3a 100%); */
    width:100vw;
    height:100vh;
    position: relative;
    background: url("../images/bg.jpg") no-repeat;
    background-size: cover;
    overflow: hidden;
}
.header{
    width: 100%;
    height: 10vh;
    background: url("../images/head_bg.png") no-repeat;
    background-size:cover;
    text-align: center;
    line-height: 5vw;
    color: #fff;
    font-size: 3vw;
    font-family:electronicFont
}
.content{
    width: 30vw;
    height: 86vh;
    
}
.barGraph{
    margin-top: 10px;
    width: 30vw;
    height: 28vh
}
.cl2{
    margin-left: auto;
    
    position: absolute;
    right: 0;
    top: 10vh;
}

#BarGraph1{
    padding: 5px;
}
.center{
    height: 88%;
    /* background-color: #fff; */
    position: absolute;
    top: 12vh;
    left: 31vw;
    right: 31vw;
}
.income{
    height: 15vh;
}
.income-fl{
    display: flex;
}
.income-number{
    color: rgb(255, 235, 123);
    flex: 1 1 0%;
    text-align: center;
    height: 15vh;
    margin-top: 5vh;
    /* line-height: 15vh; */
    align-items: center;
    /* font-size: 10vh; */
    font-weight: 500;
}
.income-span{
    width: 1px;
    height: 10vh;
    font-family: electronicFont1;
    background: aliceblue;
    margin-top: 2.5vh;
}
.income-number::before{
    position: absolute;
    content: "";
    height: 50%;
    width: 1px;
    background: rgba(255,255,255,.2);
    right: 0;
    top: 25%;
}
.map{
    width: 100%;
    height: 70vh;
    /* background-color: #fff; */
}

.map1{
    width: 100%;
    height: 70vh;
    animation: myfirst2 15s infinite linear;
}
.map1>img{
    width: 100%;
    height: 70vh;
}
.map2{
    width: 90%;
    height: 65vh;
    margin-left: 5%;
    margin-top: 2.5vh;
    opacity: 0.2; animation: myfirst 10s infinite linear;
}
.map2>img{
    width: 90%;
    height: 65vh;

}

.map3{
    width:85%;
    height: 60vh;
    margin-left: 10%;
    margin-top: 5vh;
    
}
.map3>img{
    width: 85%;
    height: 60vh;
    
}
.map4{
    z-index: 15;
    width: 100%;
    height: 70vh;
}

@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}

.map1,.map2,.map3{ position:absolute; opacity: .5}
.map{  position:relative; z-index: 9;}

.border-box-content{
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}